<template>
  <div>
    <CategorySelector @changeCategory="changeCategory" :disabled="!isShowList" />
    <el-card style="margin-top: 10px">
      <template v-if="isShowList">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="min"
          style="margin-top: 20px"
          :disabled="!category3Id"
          @click="showAddAttr"
        >
          添加属性
        </el-button>
        <el-table :data="attrList" border style="width: 100%; margin: 20px 0">
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="attrName"
            label="属性名"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column label="属性值列表" align="center">
            <template slot-scope="{ row }">
              <el-tag
                style="margin-right: 5px"
                v-for="attr in row.attrValueList"
                :key="attr.id"
                >{{ attr.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-edit"
                @click="updateShowList(row)"
                size="min"
                style="color: orange"
              >
              </el-button>
              <el-button @click="removeAttr(row)" icon="el-icon-delete" size="min" style="color: red">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <AddOrUpdateAttr
        :setAttr="setAttr"
        :category3Id="category3Id"
        @ShowList="ShowList"
        v-else
      />
    </el-card>
  </div>
</template>

<script>
import CategorySelector from "@/components/CategorySelector/CategorySelector.vue";
import AddOrUpdateAttr from "./component/addOrUpdateAttr/addOrUpdateAttr.vue";
import { getAttrListApi,deleteAttrApi } from "@/api/product/attr/attr";
export default {
  name: "Attr",
  components: {
    CategorySelector,
    AddOrUpdateAttr,
  },
  data() {
    return {
      attrList: [],
      // id: 106,
      // attrName: "手机一级",
      // categoryId: 2,
      // categoryLevel: 1,
      // attrValueList: {
      // attrId: 106
      // id: 176
      // valueName: "安卓手机",
      // }
      category1Id: "",
      category2Id: "",
      category3Id: "",
      isShowList: true,
      setAttr: {},
    };
  },
  methods: {
    //自定义事件,子组件给父组件传递三级ID
    changeCategory({ id, level }) {
      if (level === 1) {
        this.category1Id = id;
      } else if (level === 2) {
        this.category2Id = id;
      } else {
        this.category3Id = id;
        this.getAttrListFn();
      }
    },
    //获取属性列表
    async getAttrListFn() {
      const res = await getAttrListApi(
        this.category1Id,
        this.category2Id,
        this.category3Id
      );
      this.attrList = res.data;
    },
    //自定义事件页面切换
    ShowList() {
      this.isShowList = true;
    },
    //添加
    showAddAttr() {
      this.setAttr = {};
      this.isShowList = false;
    },
    //更新
    updateShowList(row) {
      // this.$emit('setAttr',row)
      this.setAttr = row;
      this.isShowList = false;
    },
    //删除
    async removeAttr(row){
      const id = row.id
      await deleteAttrApi(id)
      this.$message.info('删除成功')
      this.getAttrListFn();
    }
  },
  watch: {
    isShowList: {
      handler() {
        this.getAttrListFn();
      },
    },
  },
};
</script>

<style scoped></style>
